<template>
  <div class="swiper-box">
    <el-carousel :interval="4000" type="card" height="200px" trigger="click">
      <el-carousel-item v-for="(item,i) in result" :key='item.id'>
        <img :src='item.pic' @click="imgClick(item)">
        <div class="text" :style="{backgroundColor:item.titleColor === 'red'? isred : isblue}">{{item.typeTitle}}</div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import {request} from 'network/request'
export default {
  name:'Recommend',
  data(){
    return {
      result:[],
    }
  },
  methods:{
    async getbanner(){
      const data = await request('GET','homepage/block/page',{refresh:true})
      this.result = data.data.blocks[0].extInfo.banners
    },
    async imgClick(item){
      if(item.url === null){
        var id = item.encodeId
        const musicDetail = await request("GET",'song/detail',{ids:id})
        if(item.typeTitle == '新歌首发'){
          this.$store.commit('addMusic',musicDetail.songs[0])
        }else if(item.typeTitle == '歌单'){
          this.$router.push('/playlistdetail/'+id+'/'+0)
        }
        return
      } 
      window.open(item.url)
    }
  },
  computed:{
    isred(){
      return 'rgb(204,74,74)'
    },
    isblue(){
      return 'rgb(74,121,204)'
    }
  },
  created(){
    this.getbanner()
  },
}
</script>

<style scoped>
.swiper-box{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
}
.el-carousel{
  width: 100%;
}
.el-carousel img{
  /* width: 550px; */
  cursor: pointer;
  /* position: relative; */
  width: 100%;
  height: 100%; 
  border-radius: 8px;
}
.el-carousel .text{
  text-align: center;
  position: absolute;
  height: 20px;
  line-height: 18px;
  right: 0px;
  bottom: 0px;
  padding: 0 10px;
  font-size: 5px;
  color: #fff;
  border-top-left-radius: 6px;
  border-bottom-right-radius: 8px;
}

</style>